<template>
  <div class="op-container">
    <div class="Related_container">
      <div class="service_box">
        <div class="service_left">
<!--          <div class="service_item" style="margin-top: 0;">-->
<!--            <p>QQ群:</p>-->
<!--            <el-input :readonly="!authorityHandle(159)" v-model="serviceInfo.qqGroupOne" onkeyup="value=value.replace(/[^0-9.]/g,'')" />-->
<!--          </div>-->
<!--          <div class="upload_box">-->
<!--            <k-upload-file-->
<!--              ref="upload1"-->
<!--              v-model="codeValue1"-->
<!--              upload-style="img"-->
<!--              @successUpload="successUpload($event,1)"-->
<!--            />-->
<!--            <span style="color: #b2b2b2">只能上传jpg/png文件，且不超过2M</span>-->
<!--            <p class="upload_tit">QQ二维码</p>-->
<!--          </div>-->

          <div class="service_item">
            <p>QQ群:</p>
            <el-input :readonly="!authorityHandle(159)" v-model="serviceInfo.qqGroupTwo" onkeyup="value=value.replace(/[^0-9.]/g,'')" />
          </div>
          <div class="service_item">
            <p>QQ群:</p>
            <el-input :readonly="!authorityHandle(159)" v-model="serviceInfo.qqGroupThree" onkeyup="value=value.replace(/[^0-9.]/g,'')" />
          </div>
          <div class="service_item">
            <p>QQ群:</p>
            <el-input :readonly="!authorityHandle(159)" v-model="serviceInfo.qqGroupFour" onkeyup="value=value.replace(/[^0-9.]/g,'')" />
          </div>
        </div>

        <div class="service_right">
          <div class="service_item" style="margin-top: 0;">
            <p>客服QQ号:</p>
            <el-input :readonly="!authorityHandle(159)" v-model="serviceInfo.qqOne" onkeyup="value=value.replace(/[^0-9.]/g,'')" />
          </div>
          <div class="service_item">
            <p>客服QQ号:</p>
            <el-input :readonly="!authorityHandle(159)" v-model="serviceInfo.qqTwo" onkeyup="value=value.replace(/[^0-9.]/g,'')" />
          </div>
          <div class="service_item">
            <p>客服QQ号:</p>
            <el-input :readonly="!authorityHandle(159)" v-model="serviceInfo.qqThree" onkeyup="value=value.replace(/[^0-9.]/g,'')" />
          </div>
          <div class="service_item">
            <p>邮箱:</p>
            <el-input :readonly="!authorityHandle(159)" v-model="serviceInfo.email" />
          </div>
          <div class="upload_out">
            <div class="upload_box">
              <k-upload-file
                ref="upload2"
                v-model="codeValue2"
                upload-style="img"
                @successUpload="successUpload($event,2)"
              />
              <span style="color: #b2b2b2">只能上传jpg/png文件，且不超过2M</span>
              <p class="upload_tit">公众号二维码</p>
            </div>
            <div class="upload_box">
              <k-upload-file
                ref="upload3"
                v-model="codeValue3"
                upload-style="img"
                @successUpload="successUpload($event,3)"
              />
              <span style="color: #b2b2b2">只能上传jpg/png文件，且不超过2M</span>
              <p class="upload_tit">抖音二维码</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <button v-if="authorityHandle(159)" class="btnStyle" @click="saveServiceInfo">保存</button>
    </div>
  </div>
</template>

<script>
import { getServiceInfo, setServiceInfo } from '@/api/settings/settings'

export default {
  components: {},
  data() {
    return {
      serviceInfo: {
        qqGroupOne: '', // qq群',
        qqGroupTwo: '', // qq群',
        qqGroupThree: '', // qq群',
        qqGroupFour: '', // qq群',
        qqGroupQrCode: '', // qq群二维码',
        qqOne: '', // qq',
        qqTwo: '', // qq',
        qqThree: '', // qq',
        email: '', // 邮箱',
        subscriptionQrCode: '', // 公众号二维码',
        tiktokQrCode: '' // 抖音二维码'
      }
    }
  },
  computed:	{
    codeValue1() {
      return  this.serviceInfo.qqGroupQrCode
    },
    codeValue2() {
      return this.serviceInfo.subscriptionQrCode
    },
    codeValue3() {
      return this.serviceInfo.tiktokQrCode
    }
  },
  watch: {},
  created() {
    this.getServiceInfo()
  },
  mounted() {},
  methods: {
    getServiceInfo() {
      getServiceInfo().then(res => {
        this.$log(res)
        if (res.data.data === null) return
        this.serviceInfo = res.data
      })
    },
    saveServiceInfo(e) {
      const target = e.target
      target.blur()
      setServiceInfo(this.serviceInfo).then(res => {
        this.$message.success('保存成功')
      })
    },
    successUpload(data, flag) {
      if (flag === 1) {
        this.serviceInfo.qqGroupQrCode = data
      } else if (flag === 2) {
        this.serviceInfo.subscriptionQrCode = data
      } else if (flag === 3) {
        this.serviceInfo.tiktokQrCode = data
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText:#14162E; // 侧边栏字体颜色
$hoverColor:#1D143C;// 鼠标停留主色调浅色
$mainColor:#3b425d;// 主色调
 ::v-deep .avatar-uploader{
 &-icon {
      width: 120px;
      height: 120px;
      line-height: 120px;
    }
   .avatar {
      width: 120px;
      height: 120px;
      display: block;
    }
 }
.op-container {
  margin: 20px;
  display: flex;
  flex-direction: column;
  .Related_container {
    width: 1000px;
    padding: 60px 0;
    border-radius: 10px;
    border: 1px dashed #ccc;
    margin: 50px auto 0;
    .el-input__inner:focus {
      border-color: #3b425d
    }
    .service_box {
      width: 100%;
      display: flex;
      .service_left {
        width: 50%;
        .service_item {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 20px;
          font-size: 16px;

          .el-input {
            width: 310px;
            height: 40px;
            margin: 0 20px;
            input {
              width: 100%;
              height: 100%;
            }
          }
        }
        .upload_box {
          width: 100%;
          padding-left: 40%;
          box-sizing: border-box;
          margin-top: 20px;
          .upload_tit {
            padding-left: 30px;
            box-sizing: border-box;
          }
        }
      }
      .service_right {
        width: 50%;
        .service_item {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 20px;
          font-size: 16px;
          p {
            width: 100px;
            text-align: right;
            padding-right: 10px;
            box-sizing: border-box;
          }

          .el-input {
            width: 310px;
            height: 40px;
            margin: 0 10px;

            input {
              width: 100%;
              height: 100%;
            }
          }
        }

        .upload_out {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 0 20px 0 120px;
          box-sizing: border-box;
          margin-top: 20px;
          .upload_tit {
            padding-left: 20px;
            box-sizing: border-box;
          }
        }
      }

    }
  }
  .footer {
    text-align: center;
    margin-top: 30px;
  }
}

</style>
